function showTitle(el, title) {
    const popover = getPopover()
    const popoverStyle = popover.style

    if (title === undefined) {
        popoverStyle.display = 'none'
    } else {
        // 获取元素的样式信息对象
        // elrect 是一个具有四个属性left、top、right、bottom的DOMRect对象
        const elRect = el.getBoundingClientRect()
        // 获取元素的样式信息对象
        // 该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值
        const elComputedStyle = window.getComputedStyle(el, null)

        const rightOffset = parseInt(elComputedStyle.getPropertyValue('padding-right')) || 0
        const topOffset = parseInt(elComputedStyle.getPropertyValue('padding-top')) || 0

        // 基于元素对象信息给庶罩设置位置及样式信息
        popoverStyle.visibility = 'hidden'
        popoverStyle.display = 'block'
        popover.querySelector('.popover-content').textContent = title
        popoverStyle.left = elRect.left - popover.offsetWidth / 2 + (el.offsetWidth - rightOffset) / 2 + 'px'
        popoverStyle.top = elRect.top - popover.offsetHeight + topOffset + 'px'
        popoverStyle.display = 'block'
        popoverStyle.visibility = 'visible'
    }
}

/**
 * 返回插入文档对象弹窗层片段
 */
function getPopover() {
    let popover = document.querySelector('.title-popover')

    if (!popover) {
        const tpl = `
        <div class="popover title-popover top fade in" style="position:fixed;">
            <div class="arrow"></div>
            <div class="popover-content"></div>
        </div>
        `

        // 获取文档片段
        const fragment = document.createRange().createContextualFragment(tpl)

        document.body.appendChild(fragment)
        // 原生写法获取
        popover = document.querySelector('.title-popover')
    }

    return popover
}

export default {
    // 指令钩子 绑定元素，初始化
    bind(el, binding) {
        const events = ['mouseenter', 'mouseleave', 'click']
        const handler = (event) => {
            if (event.type === 'mouseenter') {
                showTitle(el, binding.value)
            } else {
                showTitle()
            }
        }

        // 初始化元素绑定事件
        events.forEach((event) => {
            // 添加多个事件监听器，false句柄在冒泡阶段执行
            el.addEventListener(event, handler, false)
        })

        // 元素解绑卸载事件监听器
        el.destroy = () => {
            events.forEach((event) => {
                el.removeEventListener(event, handler, false)
            })
            el.destroy = null
        }

    },

    // 指令钩子 解绑元素，指定生命周期内仅调用一次
    unbind(el) {
        el.destroy()
    }
}